<template>
  <!--          入口main.js                  -->
  <!--              ↓                       -->
  <!--      new Vue(Vue实例化)              -->
  <!--              ↓                        -->
  <!--          App.vue根组件                -->
  <!--              ↓                        -->
  <!--      ↓       ↓        ↓                -->
  <!--    组件1   组件2    组件3              -->

  <!-- 单vue文件好处是,独立作用域 互相不影响 -->
  <!-- v-on -->
  <!-- v-on/@click -->
  <div>
      <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1067802262,1506222940&fm=26&gp=0.jpg">
      <br><br>
      <button @click="lastD" v-show="isShow1">上一站:{{arr[this.index-1]}}</button>&nbsp;&nbsp;&nbsp;
      <!--TODO {{arr[this.index-1]}}√  {{arr[this.index--]}  -->
      <span>当前到站:{{arr[index]}}</span>&nbsp;&nbsp;&nbsp;
      <button @click="nextD" v-show="isShow2">下一站:{{arr[this.index+1]}}</button>
  </div>
</template>

<script>
export default {
    data () {
        return {
            arr:['起点','天安门西','天安门','建国门','朝阳门','后沙峪','三里屯','灯市口','珠市口','鱼市口','玉渊潭','八一宾馆','终点'],
            isShow1:true,
            isShow2:true,
            index:1
        }
    },
    methods:{
        lastD(){
        if(this.index==this.arr.length-1){
            this.isShow2=true
        }
            this.index--;
        if(this.index==0){
            this.isShow1=false
        }
        },
        nextD(){
        if (this.index==0) {
            this.isShow1=true;
        }
            this.index++;
        if(this.index==this.arr.length-1){
            this.isShow2=false
        }
        }
    }
}
</script>

<style>
div {
    text-align: center;
    margin: 0 auto;
}
</style>